<template>
  <div class="fans">
    <el-card>
      <my-header title="粉丝管理" slot="header"></my-header>
      <transition name="fade">
        <div class="fans-body" v-if="fansList.length > 0">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
              <ul>
                <li
                  class="user-li"
                  v-for="(item, index) in fansList"
                  :key="index"
                >
                  <img :src="item.photo" alt="" />
                  <p>{{ item.name }}</p>
                  <el-button type="primary" plain size="small">+关注</el-button>
                </li>
              </ul>
              <el-pagination
                @current-change="currentChange"
                background
                layout="total,prev, pager, next"
                :total="total"
                :page-size="24"
              >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
              <div id="echarts" style="width: 600px;height:400px;"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </transition>
    </el-card>
  </div>
</template>

<script>
import { getFans, echartData } from '../../api/fans.js'
import echarts from 'echarts'
export default {
  name: 'find',
  data () {
    return {
      activeName: 'first',
      page: 1,
      per_page: 24,
      fansList: [],
      total: 100
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    currentChange (val) {
      this.page = val
      this.getData()
    },
    async getData () {
      const res = await getFans({ page: this.page, per_page: this.per_page })
      this.fansList = res.data.results
      this.total = res.data.total_count
    },
    async getEchartsData () {
      const res = await echartData()
      const data = []
      Object.keys(res.data.age).forEach(index => {
        data.push(res.data.age[index])
      })

      const myChart = echarts.init(document.getElementById('echarts'))
      this.$nextTick(() => {
        const option = {
          xAxis: {
            type: 'category',
            data: ['小于18', '小于23', '小于30', '小于40', '小于50', '大于50']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      })
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    this.getEchartsData()
  }
}
</script>

<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.6s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.fans {
  .fans-body {
    margin-top: 20px;
    ul {
      padding: 0;
      margin-bottom: 0;
      .user-li {
        list-style: none;
        width: 120px;
        height: 170px;
        border: 1px dashed #ddd;
        text-align: center;
        padding-top: 10px;
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 30px;
        img {
          height: 80px;
          width: 80px;
          display: block;
          margin: 0 auto;
          line-height: 80px;
          border-radius: 50%;
          background: url('../../assets/avatar.jpg') no-repeat;
          background-size: cover;
        }
        p {
          margin: 10px 0;
        }
      }
    }
  }
  .el-pagination {
    text-align: center;
  }
}
</style>
